<template>
  <div class="index">
    <el-form ref="dataForm" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="dqtitle">强电配置</div>
          <el-card class="box-card">
            <div class="dataFormTitle">设备列表</div>
            <el-form-item>
              <div style="height:580px;width:150px;overflow:auto;">
                <div v-for="item in allChicketList" :key="item" style="margin-bottom:10px;">{{item}}</div>
              </div>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="4">
          <div class="dqtitle">常用命令</div>
          <el-card class="box-card">
            <div class="dataFormTitle">场景选择</div>
            <el-form-item>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="dataFormTitle">启用功能</div>
            <el-form-item label>
              <el-button>启用强电定时功能</el-button>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="6">
          <div class="dqtitle">场景数据配置</div>
          <el-card class="box-card">
            <div class="dataFormTitle">强电数量</div>
            <el-form-item>
              <el-select v-model="qiangdianNumValue" placeholder="请选择">
                <el-option
                  v-for="item in qiangdianNum"
                  :key="item.num"
                  :label="item.label"
                  :value="item.num"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label prop="productDay" style="margin-left: -20px;">
              <div>
                <div>
                  <el-tabs tab-position="left">
                    <el-tab-pane v-for="item in qiangdianNum" :label="item.label" :key="item.num">
                      <!-- 多选框 -->
                      <el-checkbox-group
                        v-model="checkList1"
                        style="width: 190px;"
                        v-if="item.num === 1"
                        :disabled="item.disabled"
                      >
                        <el-checkbox
                          v-for="item2 in checkListItems1"
                          :label="item2.checkName"
                          :key="item2.checkValue"
                        ></el-checkbox>
                      </el-checkbox-group>
                      <!-- 多选框 -->
                      <el-checkbox-group
                        v-model="checkList2"
                        style="width: 190px;"
                        v-if="item.num === 2"
                        :disabled="item.disabled"
                      >
                        <el-checkbox
                          v-for="item2 in checkListItems2"
                          :label="item2.checkName"
                          :key="item2.checkValue"
                        ></el-checkbox>
                      </el-checkbox-group>
                      <!-- 多选框 -->
                      <el-checkbox-group
                        v-model="checkList3"
                        style="width: 190px;"
                        v-if="item.num === 3"
                        :disabled="item.disabled"
                      >
                        <el-checkbox
                          v-for="item2 in checkListItems3"
                          :label="item2.checkName"
                          :key="item2.checkValue"
                        ></el-checkbox>
                      </el-checkbox-group>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="4">
          <div class="dqtitle">强电定时</div>
          <el-card class="box-card">
            <div class="dataFormTitle">定时开关</div>
            <el-form-item>
              <el-checkbox v-model="TimeChecked">{{TimeCheckedTxt}}</el-checkbox>
            </el-form-item>
            <div class="dataFormTitle">播放时间</div>
            <el-form-item>
              <el-time-picker
                v-model="timePicker"
                :picker-options="{
                        selectableRange: '0:00:00 - 23:59:59'
                      }"
                :disabled="TimeCheckedIstrue"
                placeholder="任意时间点"
              ></el-time-picker>
            </el-form-item>
            <div class="dataFormTitle">按星期定时</div>
            <el-form-item>
              <el-radio-group v-model="XQCheckList" :disabled="TimeCheckedIstrue">
                <el-radio :label="1">星期一</el-radio>
                <el-radio :label="2">星期二</el-radio>
                <el-radio :label="3">星期三</el-radio>
                <el-radio :label="4">星期四</el-radio>
                <el-radio :label="5">星期五</el-radio>
                <el-radio :label="6">星期六</el-radio>
                <el-radio :label="7">星期七</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="dataFormTitle">播放模式</div>
            <el-form-item>
              <el-select v-model="playModelsClick" placeholder="请选择" :disabled="TimeCheckedIstrue">
                <el-option
                  v-for="item in playModels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="dataFormTitle" style="position: absolute;bottom: 60px;">添加到定时列表</div>
            <el-form-item style="position: absolute;bottom: 0px;">
              <el-button :disabled="TimeCheckedIstrue" @click="timeBtn()">添加</el-button>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="4">
          <div class="dqtitle">定时列表</div>
          <el-card class="box-card">
            <div class="dataFormTitle">任务列表</div>
            <el-form-item>
              <div>
                <el-table
                  ref="singleTable"
                  :data="timingList"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  :row-class-name="tableRowClassName"
                  style="width: 200px;margin-top: -65px;"
                >
                  <el-table-column property="date" width="200"></el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <el-form-item style="position: absolute;bottom: 0px;">
              <el-button @click="timingListDelete()">删除</el-button>
              <el-button @click="timingListAllDelete()">清空</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="confirm()">修 改</el-button>
      <el-button @click="cancel()">取 消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: ['allChicketList'],
  data () {
    return {
      hello: 'hello',
      rules: { // 表单验证
        productDay: [{ required: true, message: '请输入有效期', trigger: 'blur' }]
      },
      form: {}, // 修改携带数据
      options: [{ // 场景选择，场景编号
        value: '0',
        label: '场景1'
      }, {
        value: '1',
        label: '场景2'
      }, {
        value: '2',
        label: '场景3'
      }],
      value: '场景1',
      qiangdianNum: [ // 强电数量
        {
          num: 1,
          label: '强电1',
          disabled: true
        },
        {
          num: 2,
          label: '强电2',
          disabled: true
        },
        {
          num: 3,
          label: '强电3',
          disabled: true
        }
      ],
      qiangdianNumValue: '强电1', // 下拉框value
      checkListItems1: [ // 强电通道1
        {
          checkName: '通道1',
          checkValue: 0,
          checkType: false
        },
        {
          checkName: '通道2',
          checkValue: 1,
          checkType: false
        },
        {
          checkName: '通道3',
          checkValue: 2,
          checkType: false
        },
        {
          checkName: '通道4',
          checkValue: 3,
          checkType: false
        },
        {
          checkName: '通道5',
          checkValue: 4,
          checkType: false
        },
        {
          checkName: '通道6',
          checkValue: 5,
          checkType: false
        }
      ],
      checkList1: [],
      checkListItems2: [ // 强电通道2
        {
          checkName: '通道1',
          checkValue: 0,
          checkType: false
        },
        {
          checkName: '通道2',
          checkValue: 1,
          checkType: false
        },
        {
          checkName: '通道3',
          checkValue: 2,
          checkType: false
        },
        {
          checkName: '通道4',
          checkValue: 3,
          checkType: false
        },
        {
          checkName: '通道5',
          checkValue: 4,
          checkType: false
        },
        {
          checkName: '通道6',
          checkValue: 5,
          checkType: false
        }
      ],
      checkList2: [],
      checkListItems3: [ // 强电通道3
        {
          checkName: '通道1',
          checkValue: 0,
          checkType: false
        },
        {
          checkName: '通道2',
          checkValue: 1,
          checkType: false
        },
        {
          checkName: '通道3',
          checkValue: 2,
          checkType: false
        },
        {
          checkName: '通道4',
          checkValue: 3,
          checkType: false
        },
        {
          checkName: '通道5',
          checkValue: 4,
          checkType: false
        },
        {
          checkName: '通道6',
          checkValue: 5,
          checkType: false
        }
      ],
      checkList3: [],
      TimeChecked: false, // 定时开关
      TimeCheckedIstrue: true,
      timePicker: new Date(0, 0, 0, 0, 0), // 播放时间
      XQCheckList: 0, // 按星期定时
      playModels: [{ // 场景选择，场景编号
        value: 0,
        label: '模式1'
      }, {
        value: 1,
        label: '模式2'
      }, {
        value: 2,
        label: '模式3'
      }],
      playModelsClick: null,
      timingList: [],
      timingData: [

      ],
      currentRow: 0,
      TimeCheckedTxt: '无定时'
    }
  },
  watch: {
    qiangdianNumValue (val) {
      this.qiangdianChange(val)
    },
    TimeChecked (val) {
      if (val) {
        this.TimeCheckedIstrue = false
        this.TimeCheckedTxt = '定时播放'
        this.playModelsClick = '模式1'
      } else {
        this.TimeCheckedIstrue = true
        this.TimeCheckedTxt = '无定时'
        this.playModelsClick = null
      }
    }
  },
  methods: {
    qiangdianChange (item) {
      if (item === 1) {
        this.qiangdianNum[0].disabled = false
        this.qiangdianNum[1].disabled = true
        this.qiangdianNum[2].disabled = true
      }
      if (item === 2) {
        this.qiangdianNum[0].disabled = true
        this.qiangdianNum[1].disabled = false
        this.qiangdianNum[2].disabled = true
      }
      if (item === 3) {
        this.qiangdianNum[0].disabled = true
        this.qiangdianNum[1].disabled = true
        this.qiangdianNum[2].disabled = false
      }
    },
    timeBtn () {
      var nowTime = this.timePicker.getHours() + ':' + this.timePicker.getMinutes() + ':' + this.timePicker.getSeconds()
      if (this.XQCheckList === 0) {
        this.$message({
          message: '请选择星期',
          type: 'error'
        })
        return false
      }
      if (this.playModelsClick === null) {
        this.$message({
          message: '请选择播放模式',
          type: 'error'
        })
        return false
      }
      this.timingData.push(
        {
          time: nowTime,
          week: this.XQCheckList,
          model: this.playModelsClick
        }
      )
      var newPlayModelsClick = this.playModelsClick + 1
      var newTimeTxt = '每周' + this.XQCheckList + ' ' + nowTime + '播放 模式' + newPlayModelsClick
      this.timingList.push(
        {
          date: newTimeTxt
        }
      )
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    timingListDelete () {
      var index = this.currentRow
      this.timingList.splice(index.index, 1)
      this.timingData.splice(index.index, 1)
    },
    timingListAllDelete () {
      this.timingList = []
    },
    confirm () {
      if (this.qiangdianNumValue === '') {
        this.$message({
          message: '请选择强电数量',
          type: 'error'
        })
        return false
      }
      if (this.checkList1.length < 1 && this.checkList2.length < 1 && this.checkList3.length < 1) {
        this.$message({
          message: '请选择强电通道',
          type: 'error'
        })
        return false
      }
      var newClickList1 = []
      var newClickList2 = []
      var newClickList3 = []
      for (var i = 0; i <= this.checkList1.length; i++) {
        if (this.checkList1[i] === '通道1') {
          newClickList1.push(0)
        } else if (this.checkList1[i] === '通道2') {
          newClickList1.push(1)
        } else if (this.checkList1[i] === '通道3') {
          newClickList1.push(2)
        }
      }
      for (var j = 0; j <= this.checkList2.length; j++) {
        if (this.checkList2[j] === '通道1') {
          newClickList2.push(0)
        } else if (this.checkList2[j] === '通道2') {
          newClickList2.push(1)
        } else if (this.checkList2[j] === '通道3') {
          newClickList2.push(2)
        }
      }
      for (var k = 0; k <= this.checkList3.length; k++) {
        if (this.checkList3[k] === '通道1') {
          newClickList3.push(0)
        } else if (this.checkList3[k] === '通道2') {
          newClickList3.push(1)
        } else if (this.checkList3[k] === '通道3') {
          newClickList3.push(2)
        }
      }
      var data = {
        'qdnum': this.qiangdianNumValue,
        'qdchecklist': [
          newClickList1,
          newClickList2,
          newClickList3
        ],
        'qdtiming': this.timingData
      }
      console.log(data)
    },
    // 取消修改
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.dqtitle {
  font-size: 22px;
  margin-bottom: 10px;
}
.dataFormTitle {
  font-size: 18px;
  margin-bottom: 10px;
}
.dialog-footer {
  margin-top: 30px;
}
</style>
<style>
.el-card {
  height: 650px;
}
.el-col-4 {
  margin-right: 30px;
  width: 18%;
}
.el-radio-group {
  width: 200px;
}
.el-radio-group label {
  margin-bottom: 6px;
}
</style>
